<template>
  <div class="content">
    <!--    用户部门分组列表弹窗-->
    <el-dialog
      v-dialogDrag
      title="分组列表"
      model
      :visible.sync="isclientlDialog"
      :close-on-click-modal="false"
      width="500px"
      :before-close="handleClose"
    >
      <div class="materiel-form">
        <span class="materiel-code">{{ $t('shop.name1') }}</span>
        <el-input v-model.trim="fname" class="input-width" size="mini" @keyup.enter.native="queryTBdCustomerList" />
        <el-button size="mini" type="primary" @click="queryTBdCustomerList">{{ $t('btn.search') }}</el-button>
      </div>
      <el-tree
        :data="clientlDialogData"
        :props="defaultProps"
        accordion
        @node-click="handleNodeClick"
      />
    </el-dialog>
  </div>
</template>
<script>
import {
  queryUsergroup
} from '@/api/basicManagement/userslist'
export default {
  data() {
    return {
      // 客户列表数据分页
      isclientlDialog: true,
      fname: '',
      clientlDialogData: [],
      prodValue: {},
      defaultProps: {
        children: 'details',
        label: 'fname'
      },
      treeClickCount: 0
    }
  },
  created() {
    this.queryTBdCustomerList()
  },
  methods: {
    // 获取客户列表
    async queryTBdCustomerList() {
      const DATA = {
        fname: this.fname
      }
      const { data: RES, code, message } = await queryUsergroup(DATA)
      if (code !== 0) {
        this.$confirm(message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        })
      }
      this.clientlDialogData = RES
    },
    handleNodeClick(data, node) {
      this.treeClickCount++
      if (this.treeClickCount >= 2) {
        return
      }
      this.timer = window.setTimeout(() => {
        if (this.treeClickCount === 1) {
          this.treeClickCount = 0
          this.prodValue = data
        } else if (this.treeClickCount > 1) {
          this.treeClickCount = 0
          this.$emit('group', data)
        }
      }, 300)
    },
    // 关闭前回调
    handleClose() {
      this.$emit('group', this.prodValue)
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  @include listBom;
  &::v-deep .el-dialog .el-dialog__body {
    max-height: 80vh;
    overflow: auto;
  }
}
</style>
